<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#note{
			width:400px;
			height: 600px;
			/* border: 1px solid black ; */
			border-radius: 0.375rem;
			position: absolute;
			left: 26.25rem;
			box-shadow: 6px 6px 12px gray;
		}
		#ip1{
			width: 380px;
			height: 30px;
			border: 0rem;
			outline: none;
			line-height:30px ;
			font-size: 1.25rem;
			padding-left: 10px;
			
		}
		#removeMsg{
			background-color: #FFFFFF;
			border: 0px;
			outline: none;
			position: absolute;
			left:350px
		}
		#clear{
			background-color: #FFFFFF;
			border: 0px;
			outline: none;
			margin-left: 240px;
		}
		
		</style>
		<!-- 引入vue的js文件 -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- 题目要求：模拟记事本（备忘录）功能
		 在页面列表中显示备忘录中的内容
		 可以手动添加，输入后，内容直接在列表中进行显示
		 可以对已添加的列表内容进行逐条删除
		 在记事本左下角显示在列表中的记录的总条数，
		 在记事本的和右下角，有一清空按钮，点击后，列表中的内容清空
		 且记事本关于内容记录条数以及清空按钮隐藏		 
		 -->
		 <div id="app">
		 	<div id="note">
		 		<div style="text-align: center;color: red;">
		 			<h2>记事本</h2>
		 		</div>
		 		<div>
		 			<input id="ip1" type="text" placeholder="请输入。。。" v-model="iptMsg"
					 @keydown.enter="wirteMsg()"
					 />
		 			<hr />
		 		</div >
		 		<!-- 显示列表中数据的区域 -->
		 		<div style="height: 400px;padding-left: 10px;">
		 			<h6 v-for="item,index in listdata">	
						{{index+1}}{{item}}
		 				<button id="removeMsg" @click="removeMsg(index)">&times;</button>
		 			</h6>
		 			
		 		</div>
		 		<div v-show="listdata.length!=0">
		 			<hr />
		 			<span>共有{{listdata.length}}条数据</span>
		 			<button id="clear" @click="clearMsg()">清空</button>
		 		</div>			
		 	</div>		 	
		 </div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				listdata:["吃饭饭","睡觉觉","打豆豆"],
				iptMsg:""
			},
			methods:{
				wirteMsg:function(){
					this.listdata.push(this.iptMsg)
					this.iptMsg=""
				},
				removeMsg:function(index){
					console.log(index)
					this.listdata.splice(index,1)
				},
				clearMsg:function(){
					this.listdata=[]
				}
			}
		})
	
	
	</script>
</html>
